<div
  class="mc-code-block"
  [ngClass]="theme === 'dark' ? 'mc-code-block-dark' : 'mc-code-block-light'"
  #rootRef
>
  <div class="mc-code-block-header" *ngIf="!headerTemplate">
    <span class="mc-code-lang">{{ language }}</span>
    <ng-container *ngIf="!actionsTemplate">
      <div class="mc-code-block-actions">
        <div *ngIf="isMermaid" style="margin-right: 8px">
          <ul
            class="mc-diagram-switch"
            [ngClass]="{ 'mc-show-code': !showMermaidDiagram }"
          >
            <li
              (click)="switchShowMermaid(true)"
              [ngClass]="{ 'mc-diagram-switch-active': showMermaidDiagram }"
            >
              图表
            </li>
            <li
              (click)="switchShowMermaid(false)"
              [ngClass]="{ 'mc-diagram-switch-active': !showMermaidDiagram }"
            >
              代码
            </li>
          </ul>
        </div>
        <div
          *ngIf="isMermaid && showMermaidDiagram"
          class="mc-action-btn mc-toggle-btn"
          [title]="'Md.zoomIn' | translate"
          (click)="zoomIn()"
        >
          <svg
            width="16px"
            height="16px"
            viewBox="0 0 16 16"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <g
              id="enlarge"
              stroke="none"
              stroke-width="1"
              fill="none"
              fill-rule="evenodd"
            >
              <path
                d="M7.16666667,1 C10.572409,1 13.3333333,3.76092429 13.3333333,7.16666667 C13.3333333,8.68984984 12.781084,10.0840543 11.8658888,11.1599767 L14.4225201,13.7154466 C14.6177822,13.9107088 14.6177822,14.2272912 14.4225201,14.4225534 C14.2489537,14.5961197 13.9795293,14.6154049 13.7846612,14.4804088 L13.7154133,14.4225534 L11.158968,11.8667467 C10.083183,12.7814291 8.68937384,13.3333333 7.16666667,13.3333333 C3.76092429,13.3333333 1,10.572409 1,7.16666667 C1,3.76092429 3.76092429,1 7.16666667,1 Z M7.16666667,2 C4.31320904,2 2,4.31320904 2,7.16666667 C2,10.0201243 4.31320904,12.3333333 7.16666667,12.3333333 C10.0201243,12.3333333 12.3333333,10.0201243 12.3333333,7.16666667 C12.3333333,4.31320904 10.0201243,2 7.16666667,2 Z M7.16666667,4.66666667 C7.41212656,4.66666667 7.61627504,4.84354183 7.658611,5.07679103 L7.66666667,5.16666667 L7.666,6.668 L9.16601582,6.66666666 C9.44215796,6.66630764 9.66630679,6.88987368 9.66666668,7.16601582 C9.66698576,7.4114755 9.49037648,7.61585405 9.25718258,7.65849359 L9.16731751,7.66666666 L7.666,7.668 L7.66666667,9.16666667 C7.66666667,9.44280904 7.44280904,9.66666667 7.16666667,9.66666667 C6.92120678,9.66666667 6.7170583,9.48979151 6.67472234,9.2565423 L6.66666667,9.16666667 L6.666,7.669 L5.17251751,7.67186668 C4.89637537,7.6722257 4.67222654,7.44865965 4.67186666,7.17251751 C4.67154758,6.92705783 4.84815685,6.72267929 5.08135075,6.68003974 L5.17121582,6.67186709 L6.666,6.669 L6.66666667,5.16666667 C6.66666667,4.89052429 6.89052429,4.66666667 7.16666667,4.66666667 Z"
                id="形状结合"
                fill="#71757F"
                fill-rule="nonzero"
              ></path>
            </g>
          </svg>
        </div>
        <div
          *ngIf="isMermaid && showMermaidDiagram"
          class="mc-action-btn mc-toggle-btn"
          title="缩小"
          (click)="zoomOut()"
        >
          <svg
            width="16px"
            height="16px"
            viewBox="0 0 16 16"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <g
              id="zoom-out"
              stroke="none"
              stroke-width="1"
              fill="none"
              fill-rule="evenodd"
            >
              <path
                d="M7.16666667,1 C10.572409,1 13.3333333,3.76092429 13.3333333,7.16666667 C13.3333333,8.68984984 12.781084,10.0840543 11.8658888,11.1599767 L14.4225201,13.7154466 C14.6177822,13.9107088 14.6177822,14.2272912 14.4225201,14.4225534 C14.2489537,14.5961197 13.9795293,14.6154049 13.7846612,14.4804088 L13.7154133,14.4225534 L11.158968,11.8667467 C10.083183,12.7814291 8.68937384,13.3333333 7.16666667,13.3333333 C3.76092429,13.3333333 1,10.572409 1,7.16666667 C1,3.76092429 3.76092429,1 7.16666667,1 Z M7.16666667,2 C4.31320904,2 2,4.31320904 2,7.16666667 C2,10.0201243 4.31320904,12.3333333 7.16666667,12.3333333 C10.0201243,12.3333333 12.3333333,10.0201243 12.3333333,7.16666667 C12.3333333,4.31320904 10.0201243,2 7.16666667,2 Z M9.16601582,6.66666666 C9.44215796,6.66630764 9.66630679,6.88987368 9.66666668,7.16601582 C9.66698576,7.4114755 9.49037648,7.61585405 9.25718258,7.65849359 L9.16731751,7.66666666 L5.17251751,7.67186668 C4.89637537,7.6722257 4.67222654,7.44865965 4.67186666,7.17251751 C4.67154758,6.92705783 4.84815685,6.72267929 5.08135075,6.68003974 L5.17121582,6.67186709 L9.16601582,6.66666666 Z"
                id="形状结合"
                fill="#71757F"
                fill-rule="nonzero"
              ></path>
            </g>
          </svg>
        </div>
        <div
          *ngIf="isMermaid && showMermaidDiagram"
          class="mc-action-btn mc-toggle-btn"
          title="下载"
          (click)="download()"
        >
          <svg
            width="16px"
            height="16px"
            viewBox="0 0 16 16"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <g
              id="页面-1"
              stroke="none"
              stroke-width="1"
              fill="none"
              fill-rule="evenodd"
            >
              <g id="i下载">
                <path
                  d="M14.5,14 C14.7761424,14 15,14.2238576 15,14.5 C15,14.7761424 14.7761424,15 14.5,15 L1.5,15 C1.22385763,15 1,14.7761424 1,14.5 C1,14.2238576 1.22385763,14 1.5,14 L14.5,14 Z M8,1 C8.24545989,1 8.44960837,1.17687516 8.49194433,1.41012437 L8.5,1.5 L8.5,10.793 L11.6464466,7.64644661 C11.820013,7.47288026 12.0894374,7.45359511 12.2843055,7.58859116 L12.3535534,7.64644661 C12.5271197,7.82001296 12.5464049,8.08943736 12.4114088,8.2843055 L12.3535534,8.35355339 L8.35355339,12.3535534 L8.34128643,12.3654113 C8.32881868,12.3770608 8.31575424,12.3880797 8.30214392,12.3984173 L8.35355339,12.3535534 C8.32671912,12.3803877 8.29759357,12.4035342 8.26680652,12.422993 C8.25568247,12.4299807 8.24404667,12.4367067 8.23212724,12.4429657 C8.21827569,12.4502504 8.20453886,12.4566485 8.1905951,12.4623894 C8.17802507,12.4675915 8.16473685,12.4724419 8.15119917,12.4767316 C8.13583471,12.481552 8.12047425,12.4856039 8.10498705,12.4889143 C8.09430622,12.4912471 8.08325248,12.4932298 8.07207924,12.494843 C8.05487076,12.4972949 8.03773477,12.498877 8.02056948,12.4995793 C8.01375728,12.4998604 8.00689494,12.5 8,12.5 L7.98043349,12.4996194 C7.96293275,12.4989382 7.94546098,12.4973429 7.92809589,12.4948333 L8,12.5 C7.96390296,12.5 7.92869933,12.4961748 7.89477235,12.4889078 C7.87952575,12.4856039 7.86416529,12.481552 7.84898836,12.4767587 C7.83526315,12.4724419 7.82197493,12.4675915 7.80896344,12.4622078 C7.79546114,12.4566485 7.78172431,12.4502504 7.76824181,12.443195 C7.75595333,12.4367067 7.74431753,12.4299807 7.73298968,12.422812 C7.72729809,12.4192668 7.72146362,12.4154054 7.7156945,12.4114088 L7.69785608,12.3984173 C7.68424576,12.3880797 7.67118132,12.3770608 7.65871357,12.3654113 L7.64644661,12.3535534 L3.64644661,8.35355339 C3.45118446,8.15829124 3.45118446,7.84170876 3.64644661,7.64644661 C3.82001296,7.47288026 4.08943736,7.45359511 4.2843055,7.58859116 L4.35355339,7.64644661 L7.5,10.793 L7.5,1.5 C7.5,1.22385763 7.72385763,1 8,1 Z"
                  id="形状结合"
                  fill="#71757F"
                ></path>
              </g>
            </g>
          </svg>
        </div>
        <div
          class="mc-action-btn mc-toggle-btn"
          title="展开/折叠"
          (click)="toggleExpand()"
        >
          <svg
            width="16px"
            height="16px"
            viewBox="0 0 16 16"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
          >
            <g
              id="全部收起"
              stroke="none"
              stroke-width="1"
              fill="none"
              fill-rule="evenodd"
            >
              <path
                d="M4.715694,14.4114091 C4.910563,14.5464051 5.179987,14.5271201 5.353553,14.3535531 L5.353553,14.3535531 L7.99999988,11.7070001 L10.646447,14.3535531 L10.715694,14.4114091 C10.910563,14.5464051 11.179987,14.5271201 11.353553,14.3535531 C11.548816,14.1582911 11.548816,13.8417091 11.353553,13.6464471 L11.353553,13.6464471 L8.353553,10.6464471 L8.284306,10.5885911 C8.089437,10.4535951 7.820013,10.4728801 7.646447,10.6464471 L7.646447,10.6464471 L4.646447,13.6464471 L4.588591,13.7156941 C4.453595,13.9105631 4.47288,14.1799871 4.646447,14.3535531 L4.646447,14.3535531 L4.715694,14.4114091 Z M14.5,7.50000012 C14.776142,7.50000012 15,7.72385812 15,8.00000012 C15,8.27614212 14.776142,8.50000012 14.5,8.50000012 L1.5,8.50000012 C1.223858,8.50000012 1,8.27614212 1,8.00000012 C1,7.72385812 1.223858,7.50000012 1.5,7.50000012 L14.5,7.50000012 Z M8.284306,5.41140912 L8.353553,5.35355312 L11.353553,2.35355312 C11.548816,2.15829112 11.548816,1.84170912 11.353553,1.64644712 C11.179987,1.47288012 10.910563,1.45359512 10.715694,1.58859112 L10.646447,1.64644712 L7.99999988,4.29300012 L5.353553,1.64644712 C5.179987,1.47288012 4.910563,1.45359512 4.715694,1.58859112 L4.646447,1.64644712 C4.47288,1.82001312 4.453595,2.08943712 4.588591,2.28430612 L4.646447,2.35355312 L7.646447,5.35355312 C7.820013,5.52712012 8.089437,5.54640512 8.284306,5.41140912 Z"
                id="形状结合"
                fill="#71757F"
                fill-rule="nonzero"
              ></path>
            </g>
          </svg>
        </div>
        <div
          class="mc-action-btn mc-copy-btn"
          title="复制"
          (click)="copyCode()"
        >
          @if(copied) {
          <span>
            <svg
              width="16px"
              height="16px"
              viewBox="0 0 16 16"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
            >
              <defs>
                <polygon
                  id="path-1"
                  points="6.53553391 9.77817459 12.1923882 4.12132034 13.6066017 5.53553391 6.53553391 12.6066017 3 9.07106781 4.41421356 7.65685425 6.53553391 9.77817459"
                ></polygon>
              </defs>
              <g
                id="status/whiteBG/correct"
                stroke="none"
                stroke-width="1"
                fill="none"
                fill-rule="evenodd"
              >
                <mask id="mask-2" fill="white">
                  <use xlink:href="#path-1"></use>
                </mask>
                <use id="Mask" fill="#3DCCA6" xlink:href="#path-1"></use>
              </g>
            </svg>
          </span>
          } @else {
          <span>
            <svg
              width="16px"
              height="16px"
              viewBox="0 0 16 16"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
            >
              <g
                id="页面-1"
                stroke="none"
                stroke-width="1"
                fill="none"
                fill-rule="evenodd"
              >
                <g
                  id="API-starter-图标入库"
                  transform="translate(-592.000000, -204.000000)"
                >
                  <g
                    id="方格备份-16"
                    transform="translate(560.000000, 180.000000)"
                  >
                    <text
                      id="图标"
                      font-family="PingFangSC-Regular, PingFang SC"
                      font-size="12"
                      font-weight="normal"
                      line-spacing="16"
                      fill="#71757F"
                    >
                      <tspan x="27.136" y="61">复制</tspan>
                    </text>
                  </g>
                  <path
                    d="M604.5,206 C605.279696,206 605.920449,206.594888 605.993133,207.35554 L606,207.5 L606,214.5 C606,215.279696 605.405112,215.920449 604.64446,215.993133 L604.5,216 L604,216 L604,216.5 C604,217.279696 603.405112,217.920449 602.64446,217.993133 L602.5,218 L595.5,218 C594.671573,218 594,217.328427 594,216.5 L594,216.5 L594,209.5 C594,208.671573 594.671573,208 595.5,208 L595.5,208 L596,208 L596,207.5 C596,206.720304 596.594888,206.079551 597.35554,206.006867 L597.5,206 L604.5,206 Z M602.5,209 L595.5,209 C595.223858,209 595,209.223858 595,209.5 L595,209.5 L595,216.5 C595,216.776142 595.223858,217 595.5,217 L595.5,217 L602.5,217 C602.776142,217 603,216.776142 603,216.5 L603,216.5 L603,209.5 C603,209.223858 602.776142,209 602.5,209 L602.5,209 Z M604.5,207 L597.5,207 C597.25454,207 597.050392,207.176875 597.008056,207.410124 L597,207.5 L597,208 L602.5,208 C603.279696,208 603.920449,208.594888 603.993133,209.35554 L604,209.5 L604,215 L604.5,215 C604.74546,215 604.949608,214.823125 604.991944,214.589876 L605,214.5 L605,207.5 C605,207.25454 604.823125,207.050392 604.589876,207.008056 L604.5,207 Z"
                    id="形状结合"
                    fill="#71757F"
                    fill-rule="nonzero"
                  ></path>
                </g>
              </g>
            </svg>
          </span>
          }
        </div>
      </div>
    </ng-container>
    <ng-container *ngIf="actionsTemplate">
      <ng-template [ngTemplateOutlet]="actionsTemplate" [ngTemplateOutletContext]="{ $implicit: {code, language}, codeBlockData: {code, language} }"></ng-template>
    </ng-container>
  </div>
  <ng-container *ngIf="headerTemplate">
    <ng-template [ngTemplateOutlet]="headerTemplate" [ngTemplateOutletContext]="{ $implicit: {code, language}, codeBlockData: {code, language} }"></ng-template>
  </ng-container>

  <div [ngClass]="{ 'mc-block-hidden': !expanded }" >
    @if (showMermaidDiagram && isMermaid && !contentTemplate) {
    <div class="mc-mermaid-content" #mermaidContent></div>
    } @else if(!contentTemplate) {
    <pre #codeElementTemplate><code #codeElement [ngClass]="'hljs language-' + language" ></code></pre>
    } @else {
    <ng-container *ngIf="contentTemplate">
      <ng-template [ngTemplateOutlet]="contentTemplate" [ngTemplateOutletContext]="{ $implicit: {code, language}, codeBlockData: {code, language} }"></ng-template>
    </ng-container>
    }
  </div>
</div>
